<!-- 商品分类 -->
<template>
    <el-card class="card-bottom">
        <FormTable :parameter="parameter" :formList="formList" @onquery="onquery" @onReset="onReset"></FormTable>
    </el-card>
    <el-card>
        <el-descriptions title="文章列表">
            <template #extra>
                <el-button @click="addNotice" type="primary">添加</el-button>
            </template>
        </el-descriptions>
        <PageTable ref="tableRef" :column="column" :parameter="parameter" :query="GetGoodsClassifyListApi">
            <template #belongFlag="{ row }">
                {{ belongFlagType[row.belongFlag] }}
            </template>
            <template #isBoxTab="{ row }">
                <el-switch disabled :active-value="1" :inactive-value="0" :model-value="row.isBoxTab" />
            </template>
            <template #labelStatus="{ row }">
                <div @click="changelabelStatus(row)">
                    <el-switch :active-value="1" :inactive-value="2" v-model="row.labelStatus" />
                </div>
            </template>
            <template #action="{ row }">
                <el-button @click="edit(row)" type="primary" link> 编辑 </el-button>
                <el-button @click="del(row.labelId)" type="danger" link> 删除 </el-button>
            </template>
        </PageTable>
    </el-card>
    <!-- 添加弹窗 -->
    <el-dialog v-model="AddDialog" title="添加文章" width="25%" :before-close="handleClose">
        <el-form label-position="right" label-width="100px" :model="formLabelAlign">
            <el-form-item label="标签归属">
                <el-radio-group v-model="formLabelAlign.belongFlag" class="ml-4">
                    <el-radio :label="1" size="large">盲盒标签</el-radio>
                    <el-radio :label="2" size="large">文章标签</el-radio>
                    <el-radio :label="3" size="large">会员标签</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="标签名称">
                <el-input v-model="formLabelAlign.labelName" placeholder="请输入标签名称" />
            </el-form-item>
            <el-form-item v-if="formLabelAlign.belongFlag === 2" label="是否tab">
                <el-switch disabled :active-value="1" :inactive-value="0" v-model="formLabelAlign.isBoxTab" />
            </el-form-item>
            <el-form-item label="是否显示">
                <el-switch :active-value="1" :inactive-value="2" v-model="formLabelAlign.labelStatus" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="save">
                    保存
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>

import { reactive, ref, defineComponent } from "vue";
import FormTable from '@/components/FormTable'
import PageTable from '@/components/PageTable'
import { ElMessage, ElMessageBox } from 'element-plus'
import { GetGoodsClassifyListApi } from "@/api/GoodsClassify";


defineComponent({
    components: {
        FormTable,
        PageTable
    }
})

const belongFlagType = {
    1: '盲盒标签',
    2: '文章标签',
    3: '会员标签'
}

const AddDialog = ref(false)
//弹窗form
const formLabelAlign = ref({
    belongFlag: 1,
    labelName: null,
    labelStatus: 1,
    isBoxTab: 1,
})

const parameter = reactive({
    belongFlag: null,
    labelName: null,
    labelStatus: null
})

const formList = ref([
    {
        type: 'select',
        label: '标签分类',
        options: [
            { label: '盲盒标签', value: 1 },
            { label: '文章标签', value: 2 },
            { label: '会员标签', value: 3 },
        ],
        code: 'belongFlag',
    },
    {
        type: 'input',
        label: '标签内容',
        code: 'labelName',
    },
    {
        type: 'select',
        label: '是否显示',
        options: [
            { label: '显示', value: 1 },
            { label: '隐藏', value: 2 },
            { label: '删除', value: 3 },
        ],
        code: 'labelStatus',
    },
])
const column = [
    { label: '标签归属', slots: 'belongFlag' },
    { label: '标签名称', prop: 'labelName' },
    { label: '是否tab', slots: 'isBoxTab' },
    { label: '是否显示', slots: 'labelStatus' },
    { label: '创建时间', prop: 'createTime' },
    { label: '操作', slots: 'action' },
]

// 搜索条件查询
const tableRef = ref()
function onquery() {
    tableRef.value.refresh()

}
function onReset() {
    parameter.belongFlag = null,
        parameter.labelName = null,
        parameter.labelStatus = null,
        tableRef.value.refresh(true)
}

//添加
function addNotice() {
    AddDialog.value = true
}

//弹窗关闭
function handleClose() {
    AddDialog.value = false
    formLabelAlign.value = {
        belongFlag: 1,
        labelName: null,
        isRecommend: 1,
        isBoxTab: 1,
    }
}

//是否显示开关
async function changelabelStatus(row) {
    row.labelStatus === 1 ? row.labelStatus = true : row.labelStatus = false
    await StartRecommendApi(row.labelId, row.labelStatus)
    ElMessage({
        message: '修改成功',
        type: 'success',
    })
    tableRef.value.refresh()
}


//删除按钮
async function del(id) {
    console.log(id);
    ElMessageBox.confirm(
        '确认删除吗?',
        '删除',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        await EdlLabelListApi(id)
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
        tableRef.value.refresh()
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消成功',
        })
    })
}

//保存
async function save() {
    if (!formLabelAlign.value.labelId) {
        console.log(formLabelAlign.value);
        await AddLabelListApi(formLabelAlign.value)
        ElMessage({
            message: '添加成功',
            type: 'success',
        })
    } else {
        await EditLabelListApi(formLabelAlign.value)
        ElMessage({
            message: '编辑成功',
            type: 'success',
        })
    }
    tableRef.value.refresh()
    handleClose()
}

//编辑
function edit(row) {
    console.log(row);
    formLabelAlign.value = row
    AddDialog.value = true

}
</script>

<style scoped lang="scss">
.balanceType {
    width: 44px;
    height: 24px;
    border-radius: 4px;
    text-align: center;
    line-height: 24px;
}
</style>